<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/vue.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/elementui.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-1.12.4.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.bundle.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/js/utils.js}"></script>
    <link rel="stylesheet" th:href="@{/css/elementui.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
</head>

<style>
    #appTable th, td {
        width: 350px;
        height: 55px;
        text-align: center;
    }

    #app {
        margin-top: 5%;
    }
</style>
<body>
<div id="app">
    <h3 align="center">应用列表</h3>
    <div style="display: block; width: auto;padding-left: 1%;">
        <el-button type="warning" @click="dialogFormVisible = true">新增应用</el-button>
        <el-button type="success" @click="back">返回</el-button>
        <!--<table align="center" border="1" cellpadding="0" cellspacing="0" id="appTable">-->
        <!--<tr>-->
        <!--<th>名称</th>-->
        <!--<th>部署路径</th>-->
        <!--<th>备份路径</th>-->
        <!--<th>应用脚本名称</th>-->
        <!--<th>运行状态</th>-->
        <!--<th>操作</th>-->
        <!--</tr>-->
        <!--<tr v-for="(item,index) in appList" :key="index">-->
        <!--<td>{{item.name}}</td>-->
        <!--<td>{{item.deployPath}}</td>-->
        <!--<td>{{item.backupPath}}</td>-->
        <!--<td>{{item.startScript}}</td>-->
        <!--<td>{{item.statue}}</td>-->
        <!--<td>-->
        <!--<el-upload-->
        <!--class="upload-demo"-->
        <!--ref="upload"-->
        <!--action="/upload/upload"-->
        <!--limit="1"-->
        <!--data="param">-->
        <!--<el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
        <!--</el-upload>-->
        <!--<button class="btn btn-info" @click="reloadApp(item)">重启应用</button>-->
        <!--<button class="btn btn-danger" @click="updateApp(item)">修改应用</button>-->
        <!--</td>-->
        <!--</tr>-->
        <!--</table>-->
        <template>
            <el-table :data="appList" style="width: 100%"
                      border>
                <el-table-column label="名称" width="220" prop="name"
                                 align="center">
                </el-table-column>
                <el-table-column label="部署路径" width="220" prop="deployPath"
                                 align="center">

                </el-table-column>
                <el-table-column label="备份路径" width="300" prop="backupPath"
                                 align="center">

                </el-table-column>
                <el-table-column label="应用脚本名称" width="300" prop="startScript"
                                 align="center">

                </el-table-column>
                <el-table-column label="运行状态" width="220" prop="status"
                                 align="center">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status===1" :type="scope.row.status === 1 ? 'success' : 'danger'"
                                disable-transitions>
                            运行中
                        </el-tag>
                        <el-tag v-else :type="scope.row.status === 1 ? 'success' : 'danger'" disable-transitions>
                            未运行
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="reloadApp(scope.row)">重启应用</el-button>
                        <el-button size="mini" type="danger" @click="updateApp(scope.row)">修改应用</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="上传应用jar包">
                    <template slot-scope="scope">
                        <el-upload
                                action="/upload/upload"
                                :data="{'appId':scope.row.id}"
                                multiple
                                :on-success="uploadSuccess"
                                :limit="1">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <el-dialog title="添加应用" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="应用名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="应用端口" :label-width="formLabelWidth">
                <el-input v-model="form.port" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="应用部署路径" :label-width="formLabelWidth">
                <el-input v-model="form.deployPath" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="应用备份路径" :label-width="formLabelWidth">
                <el-input v-model="form.backupPath" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="应用脚本名称(jar包名称)" :label-width="formLabelWidth">
                <el-input v-model="form.startScript" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertApp">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="修改应用" :visible.sync="dialogFormUpdateVisible">
        <el-form :model="updateForm">
            <el-form-item label="应用名称" :label-width="formLabelWidth">
                <el-input v-model="updateForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="应用端口" :label-width="formLabelWidth">
                <el-input v-model="updateForm.port" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="应用部署路径" :label-width="formLabelWidth">
                <el-input v-model="updateForm.deployPath" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="应用备份路径" :label-width="formLabelWidth">
                <el-input v-model="updateForm.backupPath" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="应用脚本名称(jar包名称)" :label-width="formLabelWidth">
                <el-input v-model="updateForm.startScript" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormUpdateVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateAppConfirm">确 定</el-button>
        </div>
    </el-dialog>


</div>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            serverId: '',
            appList: [],
            dialogFormVisible: false,
            dialogFormUpdateVisible: false,
            form: {
                name: '',
                port: '',
                uploadPath: '',
                deployPath: '',
                backupPath: '',
                startScript: '',
                deployScript: '',
                serverId: ''
            },
            updateForm: {
                id: '',
                name: '',
                port: '',
                uploadPath: '',
                deployPath: '',
                backupPath: '',
                startScript: '',
                deployScript: '',
                serverId: ''
            },
            param: {},
            initForms: {},
            initUpdateForms: {},
            formLabelWidth: '120px'
        },
        methods: {
            getAppList() {
                $.ajax({
                    url: `/app/list/${this.serverId}`,
                    type: "GET",
                    dataType: "json",
                    success: function (msg) {
                        app.appList = msg.data;
                        console.log(msg);
                    }
                });
            },
            reloadApp(item) {
                this.$confirm('确认重启, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        url: `/app/reload/${item.id}`,
                        type: "GET",
                        dataType: "json",
                        success: function (msg) {
                            if (msg.data == true) {
                                app.$message({
                                    message: '重启成功',
                                    type: 'success'
                                });
                            } else {
                                app.$message({
                                    message: '重启失败，请检查路径',
                                    type: 'error'
                                });
                            }
                            console.log(msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消'
                    });
                });

            },
            updateApp(item) {
                this.getOneApp(item.id);
                this.dialogFormUpdateVisible = true;
            },
            getOneApp(id) {
                $.ajax({
                    url: `/app/one/${id}`,
                    type: "GET",
                    dataType: "json",
                    success: function (msg) {
                        app.updateForm = msg.data;
                    }
                });
            },
            back() {
                location.href = "/index";
            },
            initForm() {
                Object.assign(this.initForms, this.form);
                Object.assign(this.initUpdateForms, this.updateForm);
            },
            updateAppConfirm() {
                $.ajax({
                    url: "/app",
                    type: "PUT",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(this.updateForm),
                    success: function (msg) {
                        if (msg.code == "200") {
                            app.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        }
                        app.dialogFormUpdateVisible = false;
                        app.getAppList();
                        Object.assign(app.updateForm, app.initUpdateForms)
                    }
                });
            },
            insertApp() {
                $.ajax({
                    url: "/app",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(this.form),
                    success: function (msg) {
                        if (msg.code == "200") {
                            app.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        }
                        app.dialogFormVisible = false;
                        app.getAppList();
                        Object.assign(app.form, app.initForms)
                    }
                });
            },
            //上传成功的回调
            uploadSuccess(response, file, fileList) {
                if (response.code == '200') {
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    this.getAppList();
                } else {
                    this.$message({
                        message: response.msg,
                        type: 'error'
                    });
                    this.getAppList();
                }
            }
        },
        mounted() {
            this.serverId = getUrlKey("id", window.location.href);
            this.form.serverId = this.serverId;
            this.getAppList();
            this.initForm();
        }
    });
</script>
</body>
</html>